<style lang="less">
input,
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
span,
i,
p {
  display: inline-block;
}
.user-bg{
  background:linear-gradient(0deg,rgba(131,158,255,1),rgba(126,86,198,1));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.1rem;
}
.mine {
  position: relative;
  min-height: 100vh;
  max-width: 100%;
  overflow: hidden;
  padding: 0.59rem 0.24rem .34rem;
  background-size: 100% 2.8rem;
  font-family: PingFang-SC;
  background-color: #f7f7f7;
  .poplayer--out {
    z-index: -2 !important;
    .popwrapper {
      transform: translateY(200%);
      position: absolute;
      width: 100%;
      bottom: 1.2rem;
    }
  }
  .poplayer--in > .popwrapper,
  .poplayer--out > .popwrapper {
    transition: transform 0.2s linear;
    .poplayer-share,
    .poplayer-cancel {
      margin: 0.16rem auto;
      border-radius: 0.1rem;
    }
    .poplayer-share {
      height: 2.96rem;
      width: 6.9rem;
      background-color: #fff;
      .poplayer-share__title {
        position: relative;
        font-size: 0.28rem;
        text-align: center;
        line-height: 1rem;
        &::after {
          position: absolute;
          display: block;
          content: "";
          left: 0.45rem;
          right: 0.45rem;
          height: 0.01rem;
          background-color: rgba(245, 245, 245, 1);
        }
      }
      .poplayer-share__icon {
        display: flex;
        height: 1.96rem;
        align-items: center;
        justify-content: flex-start;
        padding-left: 0.2rem;
        span {
          text-align: center;
          margin: 0 0.1rem;
          p {
            width: 100%;
            font-size: 0.22rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
          }
          img {
            height: 0.88rem;
            width: 0.88rem;
          }
        }
      }
    }
    .poplayer-cancel {
      width: 6.9rem;
      height: 0.88rem;
      background-color: #fff;
      line-height: 0.88rem;
      text-align: center;
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
    }
  }
  .poplayer--in {
    position: fixed;
    transition: transform 0.3s linear;
    width: 100vw;
    height: 100%;
    top: 0;
    z-index: 10000;
    background: rgba(84, 84, 84, 0.5);
    margin-left: -0.24rem;
    .popwrapper {
      transform: translateY(0);
      transition: transform 0.2s linear;
      position: absolute;
      width: 100%;
      bottom: 0rem;
      z-index: 10000;
    }
  }
}
.userinfo {
  header {
    position: absolute;
    top:.45rem;
    left: .24rem;
    z-index: 100;
    height: 1rem;
    line-height: 1.6;
    font-size: 0.24rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    p {
      letter-spacing: 0.05rem;
    }
  }
  .icon-circle {
    position: absolute;
    left: -.3rem;
    top: .67rem;
    z-index: 100;
    width: 1.69rem;
    height: 1.69rem;
    background: rgba(126, 87, 199, 1);
    opacity: 0.1;
    border-radius: 50%;
  }
}
.userinfo-main {
  z-index: 99;
  position: relative;
  width: 7.02rem;
  text-align: center;
  color: #888888;
  background-color: #fff;
  border-radius: 0.08rem;
  font-size: 0.24rem;
  &:not(:first-child) {
    margin-top: .22rem;
    margin-bottom: 0.2rem;
  }
  .userinfo-main__slogan {
    height: 1rem;
    line-height: 1rem;
  }
}
.userinfo-main__avatar {
  width: 100%;
  height: 0.5rem;
  img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -40%);
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 1.12rem;
  }
}
.userinfo-main__nick {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  text-align: center;
  font-size: 0.34rem;
  font-family: AvenirLTStd-Roman;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  padding-bottom: .3rem;
}
.uerinfo-main__invitecode {
  height: 0.36rem;
  color: #fff;
  span {
    height: 100%;
    width: 60%;
    border-radius: 0.36rem;
    line-height: 0.36rem;
    border: 0.01rem solid #7e56c6;
    p:first-child {
      font-size: 0.2rem;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:last-child {
      float: right;
      width: 1.35rem;
      font-size: 0.2rem;
      height: 0.36rem;
      border-top-right-radius: 0.36rem;
      border-bottom-right-radius: 0.36rem;
      background-color: #7e56c6;
    }
  }
}
.userinfo-main__manage {
  position: absolute;
  top: 0.8rem;
  right: 0;
  width: 1.6rem;
  height: 0.42rem;
  line-height: 0.42rem;
  text-align: center;
  background: #f7f7f7;
  border-radius: 10px 0px 0px 10px;
  color: #7e56c6;
  i {
    width: 0.22rem;
    height: 0.18rem;
    background: url("../../images/wode_zhanghao@2x.png") center;
    background-size: contain;
  }
}
.userinfo-main__title {
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: left;
  padding-left: 0.25rem;
  font-family: PingFang-SC-Bold;
  letter-spacing: 0.02rem;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  p {
    font-size: 0.24rem;
    float: right;
    margin-right: 0.26rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(126, 86, 198, 1);
  }
}
.userinfo-main__desc {
  .userinfo-main__bd {
    display: flex;
    padding: 0.1rem;
    align-items: center;
    justify-content: space-around;
    span {
      width: 33.33%;
    }
  }
  i {
    font-style: normal;
    font-size: 0.24rem;
  }
  // span{
  // 	flex:1;
  // 	height:2.56-0.8rem;
  // }
}
.userinfo-main__wallet {
  border-top: solid 1px #f7f7f7;
  height: 3.86rem;
  div {
    width: 100%;
  }
  p:not(:last-child) {
    width: 100%;
    margin: 0.2rem auto;
    font-size: 0.38rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(120, 72, 205, 1);
  }
}
.userinfo-main__team {
  border-top: solid 1px #f7f7f7;
  height: 2rem;
  p:not(:last-child) {
    width: 100%;
    margin: 0.2rem auto;
    font-size: 0.38rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(120, 72, 205, 1);
  }
}
.userinfo-main__vip {
  display: flex;
  height: 1.4rem;
  padding-bottom: 0.15rem;
  span {
    width: 25%;
  }
  div {
    position: relative;
    margin-top: 0.15rem;
    height: 0.6rem;
    // &::before{
    // 	display: inline-block;
    // 	position:absolute;
    // 	content: "";
    // 	width: 0.48rem;
    // 	height:0.48rem;
    // 	border-radius:0.48rem;
    //     left:50%;
    //     top:-5px;
    //     margin-left: -0.24rem;
    // 	border:1px solid #e3e3e3;
    // 	z-index: 2;
    // }
    img {
      width: 0.47rem;
      height: 0.47rem;
      border-radius: 0.47rem;
    }
  }
  p {
    width: 100%;
  }
}
.proppanel {
  margin-bottom: 0.99rem;
}
.proppanel-item {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 0.26rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  letter-spacing: 0.01rem;
  background-color: #fff;
  &:not(:first-child) {
    border-top: 1px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
  }
  span {
    height: 0.5rem;
    line-height: 0.5rem;
    color: #333333;
  }
  .proppanel-item-child {
    margin-right: 0;
    text-align: right;
    color: #999999;
  }
  i {
    font-size: 0;
    height: 0.18rem;
    width: 0.18rem;
    margin-bottom: 0.05rem;
    background: url("./../../images/left.png") center;
    background-size: contain;
    transform: rotateZ(180deg) translateY(-50%);
  }
}
.poplayer--out {
  z-index: -2 !important;
  .popwrapper {
    transform: translateY(200%);
    position: absolute;
    width: 100%;
    bottom: 1.2rem;
  }
}
.poplayer--in > .popwrapper,
.poplayer--out > .popwrapper {
  transition: transform 0.2s linear;
  .poplayer-share,
  .poplayer-cancel {
    margin: 0.05rem;
    border-radius: 0.1rem;
  }
  .poplayer-share {
    height: 2.96rem;
    width: 6.9rem;
    background-color: #fff;
    .poplayer-share__title {
      position: relative;
      font-size: 0.28rem;
      text-align: center;
      line-height: 1rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      &::after {
        position: absolute;
        display: block;
        content: "";
        left: 0.45rem;
        right: 0.45rem;
        height: 0.01rem;
        background-color: rgba(245, 245, 245, 1);
      }
    }
    .poplayer-share__icon {
      display: flex;
      height: 1.96rem;
      align-items: center;
      justify-content: flex-start;
      padding-left: 0.2rem;
      span {
        text-align: center;
        margin: 0 0.1rem;
        p {
          width: 100%;
          font-size: 0.22rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        img {
          height: 0.88rem;
          width: 0.88rem;
        }
      }
    }
  }
  .poplayer-cancel {
    width: 6.9rem;
    height: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
  }
}
.poplayer--in {
  position: fixed;
  transition: transform 0.3s linear;
  width: 100vw;
  height: 100%;
  top: 0;
  z-index: 555;
  background: rgba(84, 84, 84, 0.5);
  .popwrapper {
    transform: translateY(0);
    transition: transform 0.2s linear;
    position: absolute;
    width: 100%;
    bottom: 0.2rem;
  }
  &::before {
    content: "";
    display: inline-block;
    position: fixed;
    width: 0.26rem;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 555;
    background: rgba(84, 84, 84, 0.5);
  }
}
.logout--out {
  display: none;
}
.logout--in {
  position: fixed;
  transition: transform 0.3s linear;
  width: 100vw;
  height: 100%;
  top: 0;
  z-index: 555;
  background: rgba(84, 84, 84, 0.5);
  &::before {
    content: "";
    display: inline-block;
    position: fixed;
    width: 0.26rem;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 555;
    background: rgba(84, 84, 84, 0.5);
  }
  .log-wrapper {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2.54rem;
    background-color: #fff;
    border-radius: 0.1rem;
    font-size: 0.36rem;
    font-family: PingFangSC-Thin;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    overflow: hidden;
    div:first-child {
      height: 2.54-0.99rem;
      line-height: 2.54-0.99rem;
    }
    div:last-child {
      line-height: 0.99rem;
      display: flex;
      justify-content: space-around;
      color: #fff;
      span {
        box-sizing: border-box;
        padding: 0 19%;
        background: rgba(204, 175, 255, 1);
      }
      span:first-child {
        background: rgba(126, 86, 198, 1);
      }
    }
  }
}
</style>

<template>
  <div class="mine">
    <section class="userinfo">
      <header>
      </header>
      <div class="user-bg"></div>
      <div class="icon-circle"></div>
      <div class="userinfo-main">
        <span class="userinfo-main__avatar">
          <img
            :src="userInfo&&userInfo.avatarUrl?userInfo.avatarUrl:require('../../images/avatar.png')"
            alt=""
          />
        </span>
        <div class="userinfo-main__nick">
          <p>{{userInfo.userName||''}}</p>
        </div>
      </div>
      <div class="userinfo-main">
        <div
          class="userinfo-main__title"
        >我的订单</div>
        <div class="userinfo-main__desc userinfo-main__vip">
          <span @click="linkTo('/myOrders','WAIT_SEND-PART_SEND')">
            <div><img src="../../images/wode_yigoumai@2x.png" /></div>
            <p>待发货</p>
            <p></p>
          </span>
          <span @click="linkTo('/myOrders','WAIT_GET')">
            <div><img src="../../images/wode_weigoumai@2x.png" /></div>
            <p>已发货</p>
            <p></p>
          </span>
          <span @click="linkTo('/myOrders','EVALUATION')">
            <div><img src="../../images/wode_yigoumai@2x.png" /></div>
            <p>待评价</p>
            <p></p>
          </span>
          <span @click="linkTo('/myOrders','COMPLETED')">
            <div><img src="../../images/wode_yigoumai@2x.png" /></div>
            <p>已完成</p>
            <p></p>
          </span>
        </div>
      </div>
    </section>
    <section class="proppanel">
      <div
        v-for="(item,index) in panels"
        @click="linkTo('/'+item.to,item.name)"
        class="proppanel-item"
        :key="index"
      >
        <span>{{item.name}}</span>
        <span>
          <span
            class="proppanel-item-child"
            v-if="item.num>=0"
          >{{item.num}}件商品</span>
          <i></i>
        </span>
      </div>
    </section>
    <tabbar></tabbar>
  </div>

</template>

<script>
import tabbar from "../common/tabbar";
import { Confirm, TransferDomDirective as TransferDom } from "vux";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";

export default {
  name: "my",
  directives: {
    TransferDom
  },
  data() {
    return {
      userInfo: {},
      userPoints: {},
      showPop: false,
      user_id: 123456,
      user_nick: "Stan Lee",
      slogan: "",
      user_avatar: '',
      exitDialogShow: false,
      vip: {
        purchased: 0,
        unpurchased: 0
      },
      panels: [
        {
          name: "我的积分",
          to: "incomeRec"
        },
        {
          name: "地址管理",
          to: "myAddr"
        },
        {
          name: "联系客服",
          to: "mycomment"
        },
        {
          name: "关于我们",
          to: "aboutus"
        },
        {
          name: "功能介绍",
          to: "introduce"
        },
        {
          name: "注册协议",
          to: "registerText"
        }
      ],
      showLog: false,
      rank:null
    };
  },
  components: {
    tabbar,
    Confirm
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let url = CONSTANT.MY.USERINFO;
      common.get(url, "", res => {
        if (res.code == 200) {
          this.userInfo = res.data.bussData;
        }
      });
    },
    onCopy() {
      this.$vux.toast.show({
        text: "复制成功"
      });
    },
    handleCopyCode(code) {
      window.clipboardData.setData("Text", code);
    },
    linkTo(link, name) {
      this.$router.push({
        path:link,
        query:{
          type:name
        }
      });
    },
    exitDialog() {
      this.exitDialogShow = true;
    },
    popTo() {
      this.showPop = true;
    },
    onCancel() {},
    onConfirm() {}
  }
};
</script>